import { ScrollView, View } from "@tarojs/components";
import React, { useState } from "react";
import { RecommandTabs } from "../../pages/index/models";
import "./index.scss";

interface BaseRecoTabsProps{
  data:RecommandTabs[]
  onChange?:(menu?:RecommandTabs)=>void;
}

export const BaseRecoTabs = ({
  data,
  onChange
}:BaseRecoTabsProps) => {
  const [current,setCurrent] = useState<number>(0)
  const handleOnClick = (menu:RecommandTabs,index:number) => {
    onChange?.(menu)
    setCurrent(index)
  }
  return (
    <>
      <ScrollView
        className='tabs-menu'
        scrollX
        scrollWithAnimation
        enableFlex
      >
        {
          data.map((menu,index)=>(
            <View
              key={menu.id}
              className={`tabs-menu--item ${current === index ? "active" : ""}`}
              onClick={()=>handleOnClick(menu,index)}
            >
              {menu.label}
            </View>
          ))
        }
      </ScrollView>
    </>
  )
}
